<template>
  <view class="filter-box" @click.stop="changeEChartType">
    {{ query.policyName }}
    <text class="iconfont icon-xiajiantou"></text>
    <u-picker
      title="政策"
      v-model="showPicker"
      mode="selector"
      :range="policyList"
      range-key="policyName"
      confirm-color="#4888FB"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </view>
</template>

<script>
export default {
  props: ["myKey", "policyCode"],
  data() {
    return {
      showPicker: false,
      query: {},
    };
  },
  watch: {
    policyCode(value, old) {
      console.log(value, old);
      if (this.policyList.length) {
        let item = this.policyList.find(
          (item) => item.policyCode == this.policyCode
        );
        if (item) {
          this.query.policyName = item.policyName;
        }
      }
    },
  },
  created() {
    if (this.policyList.length) {
      this.query.policyName = this.policyList[0].policyName;
    }
  },
  computed: {
    policyList() {
      return this.$store.getters.policyList || [];
    },
  },

  methods: {
    changeEChartType() {
      this.showPicker = true;
    },
    onConfirm(e, i) {
      console.log(e);
      this.query.policyCode = this.policyList[e[0]].policyCode;
      // this.query.policyName = this.policyList[e[0]].policyName;
      this.$emit("confirm", this.query.policyCode, this.myKey);
      // this.chooseIndex = e[0];
    },
  },
};
</script>
<style scoped lang='scss'>
.filter-box {
  font-size: R(25);
  .icon-xiajiantou {
    font-size: R(24);
    margin-left: R(14);
  }
}
</style>